<template>
  <div class="home">
    <!-- 英雄区 -->
    <section class="hero">
      <h1>欢迎来到在线商城</h1>
      <p>发现最新、最热门的商品</p>
      <button @click="goToProducts" class="btn btn-primary">浏览商品</button>
    </section>
    
    <!-- 精选商品 -->
    <section class="featured-products">
      <h2>精选商品</h2>
      <div class="product-grid">
        <ProductCard 
          v-for="product in featuredProducts" 
          :key="product.id" 
          :product="product"
          @view-product="viewProduct"
        />
      </div>
    </section>
    
    <!-- 优惠活动 -->
    <section class="promotions">
      <h2>优惠活动</h2>
      <div class="promo-grid">
        <div class="promo-card">
          <h3>满减优惠</h3>
          <p>满300减50，满500减100</p>
        </div>
        <div class="promo-card">
          <h3>限时折扣</h3>
          <p>部分商品限时8折优惠</p>
        </div>
        <div class="promo-card">
          <h3>新用户专享</h3>
          <p>新用户注册即享100元优惠券</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ProductCard from '../components/ProductCard.vue'
import { mockProducts } from '../utils/mockData.js'

export default {
  name: 'Home',
  components: {
    ProductCard
  },
  setup() {
    const router = useRouter()
    
    const goToProducts = () => {
      router.push('/products')
    }
    
    const viewProduct = (id) => {
      router.push(`/product/${id}`)
    }
    
    // 使用模拟数据
    const featuredProducts = ref(mockProducts)
    
    return {
      goToProducts,
      viewProduct,
      featuredProducts
    }
  }
}
</script>

<style scoped>
/* 主页样式 */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 4rem 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.featured-products h2,
.promotions h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.promo-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s;
}

.promo-card:hover {
  transform: translateY(-3px);
}

.promo-card h3 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .product-grid,
  .promo-grid {
    grid-template-columns: 1fr;
  }
}
</style>